<template>
  <div class="bg-gray-50">
    <div class="max-w-[1200px] flex flex-col gap-8 mx-auto pt-8 pb-10 max-[1200px]:p-3">
      <div class="flex gap-5 items-center">
        <div class="text-3xl">FAQ</div>
        <div class="flex-1 h-0.5 bg-gray-300"></div>
      </div>
      <div
        class="text-center p-5 bg-white border border-gray-300"
        v-for="item in faqList"
        :key="item.id + 'faq'"
      >
        <div class="text-2xl pb-3">{{ item.name }}</div>
        <a-collapse :bordered="false" accordion style="background: #fff">
          <template #expandIcon="{ isActive }">
            <caret-right-outlined :rotate="isActive ? 90 : 0" />
          </template>
          <a-collapse-panel
            :key="faq.id"
            :header="faq.title"
            v-for="faq in item.problem"
            :style="customStyle"
          >
            <div class="leading-loose" v-html="faq.content"></div>
          </a-collapse-panel>
        </a-collapse>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { getFaqContentApi } from '@/api'
const customStyle =
  'background: #eee;border-radius: 4px;margin-bottom: 10px;border: 0;overflow: hidden;text-align: left;'
const faqList = ref([])

onMounted(() => {
  getFaqContentApi().then((res) => {
    faqList.value = res
  })
})
</script>
<style lang="scss" scoped></style>
